<template>
  <div class="main-box">
    <el-row>
      <el-col :span="24">
        <h2>注册</h2>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-row>
            <el-col :span="4">
                <label>用 户 名</label>
            </el-col>
            <el-col :span="20">
                <el-input v-model="userInfo.username" placeholder="用户名" clearable />
            </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-row>
            <el-col :span="4">
                <label>密　　码</label>
            </el-col>
            <el-col :span="20">
                <el-input v-model="userInfo.password" type="password" placeholder="密码" show-password/>
            </el-col>
        </el-row> 
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-row>
            <el-col :span="4">
                <label>确认密码</label>
            </el-col>
            <el-col :span="20">
                <el-input v-model="userInfo.password1" type="password" placeholder="确认密码" show-password/>
            </el-col>
        </el-row> 
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-row>
            <el-col :span="4"></el-col>
            <el-col :span="20">
                <button  @click="register">注册</button>
            </el-col>
        </el-row>
        
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { ref, reactive, onMounted } from "vue";
import axios from 'axios'
import { ElMessage } from 'element-plus'
export default {
  name: "",
  setup() {
    const userInfo = ref({
      username: "",
      password: "",
      password1:''
    });

    const register = ()=>{
      axios.get('http://localhost:3000/userlist').then(res=>{
            let flag = res.data.find(item=>item.username==userInfo.value.username)
            if(flag!=undefined){
              ElMessage({
                showClose: true,
                message: '用户名已存在',
                center: true,
              })
            }else{
              axios.post('http://localhost:3000/userlist',{
                username:userInfo.value.username,
                password:userInfo.value.password,
              }).then(res1=>{
                ElMessage({
                  showClose: true,
                  message: '注册成功，请登录',
                  center: true,
                })
              })
            }
      })
      
    }

    onMounted(() => {});
    return {
      userInfo,register
    };
  },
};
</script>
<style scoped lang='scss'>

.main-box{
    width: 100%;
    border: 1px rgb(202, 202, 202) solid;
    padding: 20px;
    border-radius: 5px;
    .el-row {
        margin-bottom: 20px;
    }
    .el-row:last-child {
        margin-bottom: 0;
    }
    .el-row:last-child{
        button{
          width:100%;
          padding: 5px 0;
          background-color:#303133 ;
          color: white;
          cursor: pointer;
          border: none;
          letter-spacing: 5px;
          text-align: center;
        }
        button:hover{
          opacity: 0.9;
        }
    }
}
.myflex{
    display: flex;
}
</style>